<template>
  <div class="info_container">
    <!-- 个人资料显示 -->
    <div class="show-info">
      <div class="info-header">
        <el-row>
          <el-col :span="3">
            <div class="icon"><el-avatar :src=this.userdata.img :size="60"></el-avatar></div>
            
          </el-col>
          <el-col :span="5">
            <div class="info-user">{{this.userdata.userName}}</div>
          </el-col>
        </el-row>
      </div>  
      <el-divider></el-divider>
      <el-descriptions class="margin-top" 
        :column="1"  
        :labelStyle="{padding:10+'px',width: 150+'px', rowCenter}"
        :contentStyle="{padding:10+'px'}"
        :data="userdata"
        size="small"
        border
      >
         
          <el-descriptions-item label="ID">
            <template slot="label">
              <i class="el-icon-info"></i>
              id
            </template>
            {{this.userdata.id}}
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            {{this.userdata.phone}}
          </el-descriptions-item>
          <el-descriptions-item label="身份">
            <template slot="label">
              <i class="el-icon-more"></i>
              身份
            </template>
            用户
          </el-descriptions-item>
          <el-descriptions-item label="职位">
            <template slot="label">
              <i class="el-icon-s-cooperation"></i>
              职位
            </template>
            {{this.userdata.occupation}}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <template slot="label">
              <i class="el-icon-magic-stick"></i>
              性别
            </template>
            {{this.userdata.sex}}
          </el-descriptions-item>
          <el-descriptions-item label="邮箱">
            <template slot="label">
              <i class="el-icon-folder-opened"></i>
              邮箱
            </template>
            {{this.userdata.email}}
          </el-descriptions-item>
          <el-descriptions-item label="工作地点">
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              工作地点
            </template>
            {{this.userdata.workPlace}}
          </el-descriptions-item>
          
      </el-descriptions>
    </div>
    
    <!-- 操作按钮 -->
    <el-button @click="showEditDialog()">修改个人资料</el-button>
    <el-button type="info" @click="apply()">申请成为编辑</el-button>
    <!-- <el-button @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> -->
    <el-button type="danger" @click="deleteOneself()">注销账户</el-button>
    
    <!-- 修改个人资料对话框 -->
    <el-dialog title="修改个人资料" :visible.sync="editDialogVisble" width="50%" :rules="editFormRules">
      <el-form :model="editForm" label-width="70px" ref="editFormRef" >
        <el-form-item label="用户名" prop="userName" :rules="[{required: true, message: '用户名不能为空'}]">
          <el-input v-model="editForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="性别"  prop="sex">
          <el-select placeholder="请选择性别" v-model="editForm.sex">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="occupation">
          <el-input v-model="editForm.occupation"></el-input>
        </el-form-item>
        <el-form-item label="工作地点" prop="workPlace">
          <el-input v-model="editForm.workPlace"></el-input>
        </el-form-item>
        <!-- 上传头像 -->
        <el-form-item label="上传头像">
            <el-upload
              class="avatar-uploader"
              ref="upload"
              action="http://43.139.170.65:9090/common/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :headers='Authorization'
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisble = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo()">确 定</el-button>
      </span>
  </el-dialog> 
  </div>
</template>

<script>
import requests from '@/api/ajax'
import { mapState } from 'vuex';
import store from '@/store';
export default {
  
  data () {
    return {
      rowCenter:{
        "text-align":"center"
      },
      userdata: {
        userName: 'uuuu',
        id : 'id',
        phone: 'pppppp',
        status: 'status',
        sex: 'ss',
        occupation: 'ooooo',
        email: 'eeee',
        workPlace: 'wwww',
        img: ''
      },
      editForm: {
        userName: '',
        sex: '',
        occupation: '',
        email: '',
        workPlace: '',
      },
      editDialogVisble: false,
      editFormRules: {
          userName: [
          { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
      },
      imageUrl: '',
      Authorization: {
        Authorization: window.localStorage.token
      }
    }
  },
  mounted () { // 获取用户数据
    requests.get('/users/userMassage').then(
      (res) => {
        // console.log(window.localStorage.token)
        // console.log(res)
        this.userdata.userName= res.data.userName
        this.userdata.id= res.data.id
        this.userdata.phone = res.data.phone
        this.userdata.sex = res.data.sex
        this.userdata.occupation = res.data.occupation
        this.userdata.workPlace = res.data.workPlace
        this.userdata.email = res.data.email
        if(res.data.img == null) {
          this.userdata.img = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        } else {
          this.userdata.img = res.data.img
        }
        if(res.data.status == 2){
          this.userdata.status = '管理员'
        } else if(res.data.status == 1){
          this.userdata.status = '编辑'
        } else {
          this.userdata.status = '用户'
        }
      }
    )
  },
  methods: {
    // header() {
    //   return { 'Authorization': window.localStorage.getItem('token') }
    // },
    deleteOneself() {
      this.$messagebox.confirm('此操作将注销您现在登录的账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(
        () => {
          requests.delete('/users/cancel')
          this.$message.success("您已注销账户~")
          window.localStorage.clear()
          this.$router.push('/login')
        }
      )
    },
    editUserInfo() {
      // 发起修改用户信息的数据请求
      this.$refs['editFormRef'].validate((valid) => {
        if(valid) {
          requests.put('/users/changeMassage', this.editForm).then((res) => {
            if(res.code == 1) {
              store.commit('$_setUsername', this.editForm.userName);
              // this.$message.success('修改成功')
              // console.log("修改成功");
          }
            else if(res.code == 0 ){
              // this.$message.error(res.msg)
              console.log(res.msg);
            }
          // window.localStorage.username = this.editForm.userName;
          // console.log('全局已变为' + store.state.username);
          });
          this.editDialogVisble = false
          this.$router.go(0)
        } else {
            this.$message.error('用户名不能为空')
            return false;
          }
      })
    },
    showEditDialog() {
      this.editDialogVisble = true
      this.editForm.userName = this.userdata.userName
      this.editForm.occupation = this.userdata.occupation
      this.editForm.email = this.userdata.email
      this.editForm.workPlace = this.userdata.workPlace
      this.editForm.sex = this.userdata.sex
    },
    apply() {
        requests.post('/apply').then(
          (res) => {
            // console.log(res)
            if(res.code == 1) {
              this.$message.success('申请成功')
            } else {
              this.$message.info(res.msg)
            }
        
          }
        )
      },
      handleAvatarSuccess(res, file, filelist) { // 下载头像
        this.imageUrl = URL.createObjectURL(file.raw);
        // this.imageUrl = `http://localhost:9090/common/download?name=${res.data}`
          // this.userdata.img = res.data
          requests.get('/users/userMassage').then(
            (re) => {
              if(re.code == 1) {
                console.log(re.data.img);
              } else {
                console.log(re.msg);
                this.$message.error(re.msg)
              }
              
            }
          )
      },
      beforeAvatarUpload(file) { // 头像图片预处理
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
  },
  computed: {
    ...mapState({
          username: (state) => {
            return state.login.username;
          },
    })
  }
}
</script>

<style lang="less" scoped>
    .info_container{
      // width: 1000px;
      width: 90%;
      margin-left: 5%;
      margin-top: 50px;
      padding-left: 10%;
      padding-bottom: 50px;
      padding-right: 50px;
      padding-top: 30px;

      font-size: larger;
      background-color: #fff;
    }
    .show-info{
      height: 450px;
      width: 80%;
    }
    .el-descriptions{
      font-size: large;
      line-height: 60px;
    }
    .el-descriptions-item__label:not(.is-bordered-label){
      padding-left: 20px;
    }
    .info-user {
      margin-top: 20px;
    }
    .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    width: 178px;
    // cursor: pointer;
    // position: relative;
    // overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>
